<template>
<!-- template是编写html标签的位置，里面必须有一个也只能有一个根标签，可以在根标签中书写多个 -->
  <div>
    <div class="box">
      <p>姓名：{{ name }}</p>
      <p>年龄：明年{{ age + 1 }}</p>
      <p>
        爱好：{{ hobby[0] }}、{{ hobby[1] }}、{{ hobby[2] }}、{{ hobby[3] }}
      </p>
      <p>性别：{{ age === 0 ? '男' : '女' }}</p>
      <p>{{ city.three }}</p>
    </div>
  </div>
</template>

<script>
// 编写js的内容 data为vue的数据方式，return一个对象，里面的内容可以通过{{变量}}大胡子写法放到dom中
export default {
  data() {
    return {
      name: 'ikun',
      age: 17,
      hobby: ['唱', '跳', 'rap', '打篮球'],
      性别: 0,
      city: {
        one: '北京',
        two: '上海',
        three: '杭州',
        four: '深圳',
        five: '苏州',
      },
    }
  },
}
</script>

<style lang="less">
// 编写css样式的位置  下载less插件可以支持less的写法
.box {
  background-color: #087;
  color: aliceblue;
}
</style>
